<template>
  <div class="turn-view">
    <div class="tit">转台</div>
    <div class="turn-ct">
      <div class="img-view">
        <el-image :src="turnImg" fit="contain"></el-image>
        <div class="angle">
          <div class="degree">{{ angle }}</div>
          <div class="direction">{{ direction }}</div>
        </div>
      </div>
      <el-input-number v-model="angle" size="small" controls-position="right" :min="0" @change="handleChange"></el-input-number>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";
import { ref } from "vue";
defineOptions({
  name: "TurnView",
  components: {}
});
const angle = ref(0);
const direction = ref("N");
const turnImg = new URL("@/assets/images/turn.png", import.meta.url).href

onMounted(() => {
  setDirection(angle.value);
});
const handleChange = (val: number) => {
  setDirection(val);
};
const setDirection = (val: number) => {
  const config: { [key: number]: string } = { 0: "N", 90: "E", 180: "S", 270: "W" };
  if (config[val]) {
    direction.value = config[val];
  } else {
    val > 0 && val < 90
      ? (direction.value = "NE")
      : val > 90 && val < 180
        ? (direction.value = "SE")
        : val > 180 && val < 270
          ? (direction.value = "SW")
          : (direction.value = "NW");
  }
};
</script>
<style scoped lang="scss">
.turn-view {
  .tit {
    padding: 0 16px;
    font-weight: bold;
    height: 32px;
    line-height: 32px;
    background-color: #f4f4f4;
    border-bottom: 1px solid #eaeaea;
  }
  .turn-ct {
    height: calc(100% - 33px);
    text-align: center;
    .img-view {
      height: calc(100% - 62px);
      position: relative;
      .el-image {
        width: 100%;
        height: 100%;
      }
      .angle {
        position: absolute;
        top: 54%;
        left: calc(50% + 6px);
        transform: translate(-50%, -50%);
        text-align: center;
        font-weight: bold;

        .degree {
          font-size: 24px;
          position: relative;
          &::after {
            content: "°";
            position: absolute;
            right: -12px;
            top: 0;
          }
        }
        .direction {
          font-size: 12px;
          margin-top: 5px;
        }
      }
    }
    .el-input-number {
      width: 80%;
      max-width: 150px;
      margin: 20px auto 0;
    }
  }
}
</style>
